<div class="box box-default">
  <div class="box-body">
    <form class="form-inline">
      <div class="box box-default">
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px !important;">
          <button class="btn btn-primary" type="button" (click)="showModel('add')">
              <i class="fa fa-edit"></i>新增</button>
          <button class="btn btn-primary" type="button" (click)="showModel('edit')">
                <i class="fa fa-edit"></i>修改</button>
          <button class="btn btn-primary" type="button">
                  <i class="fa fa-edit"></i>删除</button>
          <button type="button" class="btn btn-box-tool pull-right" data-widget="collapse">
              <i class="fa fa-minus"></i></button>
        </div>
        <div class="box-body" style="display:block;">
          <div class="form-group" style="margin-top:10px !important;padding-left:5px !important;">
            <label class=" control-label">ID：</label>
            <input type="text" class="form-control" name="sUsername" placeholder="ID">
            <label class=" control-label">任务名称：</label>
            <input type="text" class="form-control" name="sRealname" placeholder="任务名称">
            <button type="button" class="btn btn-primary" (click)="list(1)">
          <i class="fa fa-search"></i>查询</button>
          </div>
        </div>
      </div>
    </form>

    <div style="overflow-x:scroll;width:100%">
      <table class="table table-bordered table-keep-line table-hover table-striped" style="margin-top:10px;">
        <thead>
          <th class="width-5">
            <div class="checkbox checkbox-primary">
              <input type="checkbox" name="checkboxAll" [(ngModel)]="isCheckedAll" (ngModelChange)="checkedAll()">
              <label></label>
            </div>
          </th>
          <th class="width-5" (click)="orderData('id')">ID<i class="fa fa-sort"></i></th>
          <th class="width-15" (click)="orderData('jobName')">任务名称<i class="fa fa-sort"></i></th>
          <th class="width-10" (click)="orderData('efunds')">任务分组<i class="fa fa-sort"></i></th>
          <th class="width-10" (click)="orderData('jobStatus')">任务状态<i class="fa fa-sort"></i></th>
          <th class="width-15" (click)="orderData('cronExpression')">任务运行时间<i class="fa fa-sort"></i></th>

          <th class="width-10" (click)="orderData('description')">任务描述<i class="fa fa-sort"></i></th>
          <th class="width-10" (click)="orderData('targetObject')">任务类<i class="fa fa-sort"></i></th>
          <th class="width-10" (click)="orderData('targetMethod')">任务方法<i class="fa fa-sort"></i></th>
          <th class="width-10" (click)="orderData('isSpringBean')">实现方法<i class="fa fa-sort"></i></th>
        </thead>
        <tbody>
          <tr *ngFor="let item of dataList;">
            <td class="width-5">
              <div class="checkbox checkbox-primary">
                <input type="checkbox" name="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
                <label></label>
              </div>
            </td>
            <td class="width-5 short-name" [attr.title]="item.id">{{item.id}}</td>
            <td class="width-15 short-name" [attr.title]="item.jobName">{{item.jobName}}</td>
            <td class="width-10 short-name" [attr.title]="item.efunds">{{item.efunds}}</td>
            <td class="width-10 short-name" [attr.title]="item.jobStatus">{{item.jobStatus}}</td>
            <td class="width-15 short-name" [attr.title]="item.cronExpression">{{item.cronExpression}}</td>

            <td class="width-10 short-name" [attr.title]="item.description">{{item.description}}</td>
            <td class="width-10 short-name" [attr.title]="item.targetObject">{{item.targetObject}}</td>
            <td class="width-10 short-name" [attr.title]="item.targetMethod">{{item.targetMethod}}</td>
            <td class="width-10 short-name" [attr.title]="item.isSpringBean">{{item.isSpringBean}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="box-footer clearfix">
      <app-pagination [currentPageNum]="listPageInfo.currentPageNum" [pagesShow]="" [totalPages]="listPageInfo.totalPages" (pageChanged)="listPageNavigation($event)">
        <div class="pull-left pagination-detail" data-pagination-additional="true">
          <span class="pagination-info">
            当前显示第{{listPageInfo.startRow}}到第{{listPageInfo.endRow}}条，总共{{listPageInfo.total}}条，
          </span>
          <span class="page-list">
              每页记录
            <span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{listPageInfo.pageSize}}</span>
          <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li *ngFor="let i of listPageInfo.pageList" role="menuitem" [class.active]="listPageInfo.pageSize === i" (click)="listPageSizeChange(i)">
              <a>{{i}}</a>
            </li>
          </ul>
          </span>
          条
          </span>
        </div>
      </app-pagination>
    </div>
  </div>
</div>

<!-- 新增/修改modal -->
<div class="modal" id="editModel">
  <div class="modal-dialog modal-lg" style="width:900px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
        <h4 class="modal-title">
          <span *ngIf="operate=='add'">新增</span>
          <span *ngIf="operate=='edit'">修改</span>
        </h4>
      </div>
      <div class="modal-body" style="padding-bottom:0px;">
        <form class="form-horizontal" style="padding-top:20px;">
          <div class="form-group">
            <label class="col-lg-2 text-right">任务名称</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="editBody.jobName" name="jobName">
            </div>
            <label class="col-lg-2 text-right">任务分组</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="editBody.efunds" name="efunds">
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">任务状态</label>
            <div class="col-lg-3">
              <select class="form-control" [(ngModel)]="editBody.jobStatus" name="jobStatus">
                  <option [value]="1">启用</option>
                  <option [value]="0">禁用</option>
                </select>
            </div>
            <label class="col-lg-2 text-right">任务运行时间</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="editBody.cronExpression" name="cronExpression">
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-2 text-right">任务描述</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="editBody.description" name="description">
            </div>
            <select class="form-control" [(ngModel)]="editBody.description" name="description" (ngModelChange)="getValue()">
                <option [value]="''">--请选择--</option>
                <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.S_SCHEDULE_JOB">{{item.sItemValue}}</option>
              </select>
            <!-- <label class="col-lg-2 text-right">任务类</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="editBody.targetObject" name="targetObject">
            </div> -->
          </div>

          <!-- <div class="form-group">
            <label class="col-lg-2 text-right">任务方法</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="editBody.targetMethod" name="targetMethod">
            </div>
            <label class="col-lg-2 text-right">实现方法</label>
            <div class="col-lg-3">
              <input class="form-control" type="text" [(ngModel)]="editBody.isSpringBean" name="isSpringBean">
            </div>
          </div> -->
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary pull-right" (click)="save()">
              <i class="fa fa-save"></i>保存</button>
        <button type="button" class="btn btn-primary pull-left" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>